<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">添加一条新的访客信息</button>
<<<<<<< HEAD
=======

    <table border="1" cellspacing='0'>
>>>>>>> f804bc1eec9dfbece87411d64f6f1b6dfc084e10
    <button id="del">删除选中</button>
    <button id="s">年龄升序</button>
    <table border=1 cellspacing=0 cellspadding=10>
        <thead>
            <tr>
                <th>序列号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
                <th>选择</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        var info = [{
            name: "胡杭",
            age: 16
        }, {
            name: "胜明",
            age: 22
        }, {
            name: "军毅",
            age: 21
        }, {
            name: "晓华",
            age: 13
        }, {
            name: "盛聪",
            age: 23
        }, {
            name: "侦剑",
            age: 32
        }, {
            name: "红翔",
            age: 25
        }, {
            name: "超维",
            age: 18
        }, {
            name: "士琪",
            age: 22
        }, {
            name: "艳华",
            age: 20
        }];
        var tbody = document.querySelector("tbody");
        let btn = document.getElementById("btn");
<<<<<<< HEAD
=======
        var i=0,num=1;
        btn.onclick = function () {
            if(i<info.length){
                tbody.innerHTML=`
                ${tbody.innerHTML}<tr>
                    <td>${num++}</td>
                    <td>${info[i].name}</td>
                    <td>${info[i].age}</td>
                    <td><button id="ss">删除</button></td>
                    </tr>` 
                    i++;
                    
            }
            var as = document.querySelectorAll("#ss");
        console.log(as);
        }
        var as = document.querySelectorAll("#ss");
        console.log(as);
        
        let delbtn = tbody.querySelector("button");
>>>>>>> f804bc1eec9dfbece87411d64f6f1b6dfc084e10
        let del = document.querySelector("#del");
        let s = document.querySelector("#s");

        var i = 0, num = 1;
        btn.onclick = function () {
            if (i < info.length) {
                let newTr = document.createElement("tr");
                newTr.innerHTML = `
                <td>${i + 1}</td>
                <td>${info[i].name}</td>
                <td>${info[i].age}</td>
                <td><button>删除</ button></td>
                <td><input type="checkbox"/></td>
                `
                tbody.appendChild(newTr);

                // 删除
                delbtn = tbody.querySelectorAll("button");
                // 每个删除按钮绑定点击事件
                delbtn.forEach(function (el) {
                    el.onclick = function () {
                        el.parentElement.parentElement.remove();
                    }
                });
                del.onclick = function () {
                    let d = tbody.querySelectorAll("input");
                    d.forEach(function (i) {
                        if (i.type == "checkbox" && i.checked) {
                            i.parentElement.parentElement.remove();
                        }
                    })
                }

                i++;
            }
        }
<<<<<<< HEAD
      
=======
        s.onclick = function () {

            let trList = document.querySelectorAll("tr:not(:first-child)")
            let newArr = []
            trList.forEach(function (item) {
                newArr.push(item)
            })
            newArr.sort(function (a, b) {
                return (a.children[2].innerText) - (b.children[2].innerText)
            })
            newArr.forEach(function (item) {
                tbody.appendChild(item)
            })
        }
>>>>>>> f804bc1eec9dfbece87411d64f6f1b6dfc084e10

    </script>
</body>

</html>